<template>
  <div class="flow-container">
    <div class="message-center-container">
      <aside class="sidebar">
        <div class="sidebar-header">
          <div class="header-icon">
            <svg class="icon-message" viewBox="0 0 24 24" fill="currentColor">
              <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4l4 4 4-4h4c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
            </svg>
          </div>
          <h3 class="sidebar-title">消息中心</h3>
        </div>
        <ul class="nav-list">
          <li :class="{active: $route.path.includes('comment-like')}" @click="navigateToCommentLike" class="nav-item">
            <div class="nav-icon">
              <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
              </svg>
            </div>
            <span class="nav-text">评论点赞</span>
            <div v-if="hasUnreadCommentLike" class="notification-badge">
              <span class="pulse-ring"></span>
              <span class="notification-dot"></span>
            </div>
          </li>
          <li :class="{active: $route.path.includes('system')}" @click="navigateToSystem" class="nav-item">
            <div class="nav-icon">
              <svg viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
              </svg>
            </div>
            <span class="nav-text">系统消息</span>
            <div v-if="hasUnreadSystem" class="notification-badge">
              <span class="pulse-ring"></span>
              <span class="notification-dot"></span>
            </div>
          </li>
        </ul>
      </aside>
      <main class="main-content">
        <div class="content-wrapper">
          <router-view />
        </div>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUserStore } from '../../stores/user'
import { hasUnreadMessages } from '../../api/message'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

// 红点状态
const hasUnreadCommentLike = ref(false)
const hasUnreadSystem = ref(false)

// 查询红点状态
const fetchUnreadStatus = async () => {
  if (!userStore.id) return
  try {
    // 评论点赞（1）
    hasUnreadCommentLike.value = (await hasUnreadMessages(Number(userStore.id), 1)).data
    // 系统消息（0）
    hasUnreadSystem.value = (await hasUnreadMessages(Number(userStore.id), 0)).data
  } catch (error) {
    console.error('获取未读状态失败:', error)
  }
}

// 导航到评论点赞页面
const navigateToCommentLike = () => {
  router.push('/message/comment-like')
  // 延迟刷新红点状态，确保页面切换后刷新
  setTimeout(fetchUnreadStatus, 100)
}

// 导航到系统消息页面
const navigateToSystem = () => {
  router.push('/message/system')
  // 延迟刷新红点状态，确保页面切换后刷新
  setTimeout(fetchUnreadStatus, 100)
}

// 页面加载时获取红点状态，并导航到默认页面
onMounted(() => {
  fetchUnreadStatus()
  
  // 如果当前路径就是 /message，则重定向到评论点赞页面
  if (router.currentRoute.value.path === '/message') {
    router.replace('/message/comment-like')
  }
})

// 监听路由变化，刷新红点状态
router.afterEach(() => {
  setTimeout(fetchUnreadStatus, 100)
})
</script>

<style scoped>
.message-center-container {
  display: flex;
  width: 1100px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(91, 110, 225, 0.12);
  min-height: 600px;
  max-height: calc(100vh - 80px);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.message-center-container:hover {
  box-shadow: 0 12px 48px rgba(91, 110, 225, 0.18);
}

.sidebar {
  flex: 0 0 220px;
  width: 220px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.sidebar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  pointer-events: none;
}

.sidebar-header {
  padding: 32px 24px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.header-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 3s ease-in-out infinite;
}

.icon-message {
  width: 24px;
  height: 24px;
  color: white;
}

.sidebar-title {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-list {
  list-style: none;
  padding: 24px 16px;
  margin: 0;
  flex: 1;
}

.nav-item {
  padding: 16px 20px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  font-size: 16px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(10px);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-weight: 600;
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-icon svg {
  width: 100%;
  height: 100%;
}

.nav-text {
  flex: 1;
}

.notification-badge {
  position: relative;
  width: 12px;
  height: 12px;
}

.notification-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: #ff4757;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.4);
}

.pulse-ring {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 20px;
  height: 20px;
  border: 2px solid #ff4757;
  border-radius: 50%;
  animation: pulse 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

.main-content {
  flex: 1;
  background: #fafbfc;
  border-radius: 0 16px 16px 0;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.content-wrapper {
  padding: 24px;
  flex: 1;
  background: white;
  margin: 12px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  animation: slideUp 0.5s ease-out;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>